<template>
  <div class="body">

    <section class="content-banner">
      <div class="center-block">
        <span class="title">信息公开</span>
      </div>
    </section>
    <section>
      <div class="tab-container">
        <ul class="tab clearfix">
          <li class="active">
            <router-link to="/information">业务事项</router-link>
          </li>
          <li>
            <router-link to="/information/approval">审批部门</router-link>
          </li>
        </ul>
      </div>
    </section>

    <div class="notice">
      <div class="module">
        <div class="center-block">
          <div id="QuaT1" class="notice_title QuaT clearfix">
            <h3 class="circular-title"></h3>
            <div id="QuaTle1" class="QuaTle Q_left">
              <span data-value="890100" class="active">事项类型</span>
              <!--<span data-value="890200">其他事项类型</span>-->
            </div>
          </div>
          <div id="QuaBoy1" class="QuaBoy">
            <section class="active" id="dataList">
              <div class="N_container clearfix">

                <div class="C_menu" id="menu">
                  <!--菜单栏-->
                  <el-menu unique-opened :default-active="query.subNo">
                    <!-- 一级菜单 -->
                    <el-submenu :index="item.subNo+''" v-for="(item,index) in tabs" :key="index">
                      <!-- 一级菜单的模板区域 -->
                      <template slot="title">
                        <!-- 文本 -->
                        <span>{{item.menuName}}</span>
                      </template>
                      <!-- 二级菜单 -->
                      <el-menu-item @click="showTab(index,order)" :index="itemSub.subNo+''"
                                    v-for="(itemSub,order) in item.subMune" :key="order">
                        <template slot="title">
                          <!-- 文本 -->
                          <span>{{itemSub.subMenuName}}</span>
                        </template>
                      </el-menu-item>
                    </el-submenu>
                  </el-menu>
                </div>

                <div class="C_content">

                  <div class="search" style="padding-bottom: 15px;">
                    <div class="input-group">
                      <input type="text" v-model="query.value" placeholder="请输入关键字" class="form-control inputSearch">
                      <span class="input-group-btn">
                          <button @click="search" class="btn btn-default dtFont dtFont-sousuo btnSearch"
                                  type="button"></button>
                        </span>
                    </div>
                  </div>


                  <!--内容区域-->
                  <el-table :data="tableData.list" style="width: 100%" class="detail-table">
                    <el-table-column type="index" label="序号" width="60"></el-table-column>
                    <el-table-column prop="" label="申请主体" width="300">
                      <template slot-scope="scope">
                        <p class="applyMain">{{scope.row.applyMain}} <span>办件编号：{{scope.row.bJNo}}</span></p>
                      </template>
                    </el-table-column>
                    <el-table-column prop="applyItem" label="申请事项" width="220"></el-table-column>
                    <el-table-column prop="applyStartTime" label="申请时间" width="110"></el-table-column>
                    <el-table-column prop="applyEndTime" label="办结时间" width="110"></el-table-column>
                    <el-table-column prop="" label="审批意见">
                      <template slot-scope="scope">
                        <span v-if="scope.row.approveIdea>0">同意</span>
                        <span v-else class="noAgree">不同意</span>
                      </template>
                    </el-table-column>
                  </el-table>

                  <div class="padding-top-20">
                    <el-pagination
                      background
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page="tableData.page"
                      :page-sizes="[10, 20, 50, 100]"
                      :page-size="query.pg"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="query.pgsz">
                    </el-pagination>
                  </div>
                </div>

              </div>

            </section>

          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {getInfo} from '@/api/information/index';

  export default {
    name: 'information',
    data() {
      return {
        subNo: '',
        tabs: [],
        tableData: {
          list: [],
          total: 0 //总条目数
        },
        query: {
          pg: 1,//当前页数
          pgsz: 10,//当前显示多少条
          value: '',
          subNo:'240100'
        }
      }
    },
    mounted() {
      this.getInfo();
      this.$router.afterEach((to, from, next) => {
        window.scrollTo(0, 0);
      })
    },
    methods: {
      search() {
        this.getInfo();
      },
      handleSizeChange(val) {
        this.query.pgsz = val;
        this.getInfo();
      },
      handleCurrentChange(val) {
        this.query.pg = val;
        this.getInfo();
      },
      getInfo(data) {
        let {pg, pgsz,subNo, value} = this.query;
        data = {pg, pgsz,subNo, value};
        getInfo(data).then(res => {
          this.tabs = res.obj;
          let tabs = this.tabs;
          tabs.map((v, i) => {
            v.subMune.map((e, j) => {
              if (e.subNo == this.query.subNo) {
                //console.log(i,j)
                this.tableData.list = res.obj[i].subMune[j].rows;
                this.tableData.total = res.obj[i].subMune[j].total;
              }
            })
          })
        })
      },
      showTab(index, order) {
        let {pg, pgsz,subNo, value} = this.query;
        let data = {pg, pgsz,subNo, value};
        getInfo(data).then(res => {
          this.tableData.list = res.obj[index].subMune[order].rows;
          this.tableData.total = res.obj[index].subMune[order].total;
        })
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  @import '../../assets/css/information.css';
</style>
